<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <a-date-picker disabled :placeholder="placeholder" />
    </div>
    <div v-else>
      <a-date-picker
        v-model="_value"
        show-time
        :format="formatType.format"
        :value-format="formatType.format"
        disabled-input
        :disabled="$attrs.disabled"
        :allow-clear="$attrs.clearable"
        :placeholder="placeholder"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance } from "vue";
import { isEmpty } from "lodash";

const { proxy } = getCurrentInstance();
const props = defineProps({
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String,
    default: ""
  },
  format: {
    type: String,
    default: "yyyy-MM-dd HH:mm"
  },
  placeholder: {
    type: String,
    default: "请选择日期时间"
  }
});
const emit = defineEmits(["update:modelValue"]);
const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

if (isEmpty(_value.value) && !proxy.$attrs.disabled) {
  _value.value = proxy.$attrs.defaultValue;
}

const formatTypeMapping = new Map([
  ["yyyy", { format: "YYYY", type: "year" }],
  ["yyyy-MM", { format: "YYYY-MM", type: "month" }],
  ["yyyy-MM-dd", { format: "YYYY-MM-DD", type: "date" }],
  ["yyyy-MM-dd HH:mm:ss", { format: "YYYY-MM-DD HH:mm:ss", type: "datetime" }],
  ["yyyy-MM-dd HH:mm", { format: "YYYY-MM-DD HH:mm", type: "datetime" }]
]);
const formatType = computed(() => {
  return formatTypeMapping.get(props.format) || { format: "YYYY-MM-DD HH:mm:ss", type: "datetime" };
});
</script>

<style lang="scss" scoped>
:deep(.arco-picker) {
  width: 100%;
}
</style>
